<template>
  <div>
    <el-dialog
      title="课程列表"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="JADP-dialog JADP-dialog_center"
      lock-scroll
      append-to-body
      width="70%"
      @close="close"
    >
      <div class="JADP-common-layout" style="height: 45vh">
        <div class="JADP-common-layout-left" style="height: 100%">
          <div class="JADP-common-title">
            <h2>课程分类</h2>
          </div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            highlight-current
            ref="treeBox"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            class="JADP-common-el-tree"
            node-key="id"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <i :class="data.icon"></i>
              <span class="text">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div class="JADP-common-layout-center">
          <div class="JADP-common-layout-main JADP-flex-main">
            <el-row class="JADP-common-search-box" :gutter="16">
              <el-form @submit.native.prevent>
                <!-- <el-col :span="6">
            <el-form-item label="课程分类">
              <el-select
                v-model="query.crmclassification"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in getDict('kjfl')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
                <el-col :span="6">
                  <el-form-item label="课程名称">
                    <el-input
                      v-model="query.crmname"
                      placeholder="请输入"
                      clearable
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="search()"
                      >查询</el-button
                    >
                    <el-button icon="el-icon-refresh-right" @click="reset()"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <el-table
              ref="myTable"
              v-loading="listLoading"
              :data="list"
              row-key="id"
              height="500"
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                reserve-selection
                type="selection"
                width="55"
                :selectable="selected"
              />
              <el-table-column type="index" width="50" label="序号" />
              <el-table-column prop="crmname" label="课程名称" align="left" />
              <el-table-column
                label="课程分类"
                prop="crmclassification"
                algin="left"
              >
                <template slot-scope="scope">
                  <!-- {{ getDict("kjfl", scope.row.crmclassification) }} -->
                  {{ scope.row.crmclassification }}
                </template>
              </el-table-column>
              <el-table-column prop="hours" label="学时" align="left" />
              <el-table-column prop="teacher" label="讲师" align="left" />
              <!-- <el-table-column
                prop="creatoruserid"
                label="创建用户"
                align="left"
              /> -->
            </el-table>
            <pagination
              class="pagination"
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "ccc",
  props: {
    ParentList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "fullName",
      },
      list: [],
      treeData: [],
      multipleSelection: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 5,
        sort: "desc",
        sidx: "",
      },
      query: {
        crmclassification: "",
        crmname: "",
      },
      listLoading: false,
      visible: false,
      id: "",
      arrSelection: [],
    };
  },
  created() {
    this.getTreeData();
    this.initData();
  },
  methods: {
    handleNodeClick(data) {
      this.query.crmclassification = data.id;
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime",
      };
      this.initData();
    },
    getTreeData() {
      this.request({
        url: `/api/xy_ks_course_type/Xy_ks_course_type/getTreeList?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        let topItem = {
          fullName: "默认",
          hasChildren: true,
          id: "-1",
          icon: "icon-ym icon-ym-tree-organization3",
          children: res.data,
        };
        this.treeData = [topItem];
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 10,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    handleSelectionChange(val) {
      const res = val.map((item) => item.id);
      this.multipleSelection = res;
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      this.request({
        url: `/api/courseinformation/Xy_ks_curriculum_first`,
        method: "get",
        data: query,
      }).then((res) => {
        this.list = res.data.list;
        this.echo();
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    dataFormSubmit() {
      var newList = [];
      this.multipleSelection.forEach((item) => {
        newList.push({
          clazzid: this.id,
          sourse_id: item,
          organizeId:this.$store.getters.organizeId
        });
      });
      this.request({
        url: "/api/xy_ks_class_sourse/Xy_ks_class_sourse",
        method: "POST",
        data: {
          list: newList,
        },
      }).then((res) => {
        this.visible = false;
        this.$emit("initData");
      });
    },
    echo() {
      if (this.ParentList.length) {
        this.ParentList.forEach((value) => {
          this.list.forEach((item) => {
            if (value.sourse_id === item.id) {
              setTimeout(() => {
                try {
                  this.$refs["myTable"].toggleRowSelection(item, true);
                } catch (error) {}
              });
            }
          });
        });
      }
    },
    close() {
      this.$refs.myTable.clearSelection();
    },
    selected(row) {
      return !this.ParentList.some((item) => item.sourse_id === row.id);
    },
  },
};
</script>
<style scoped lang="scss">
.pagination {
  text-align: left;
}
</style>
